<script setup lang="ts">
import { useStore } from '@store/index';
import { popMessage, popMessageKey, Comment } from '@/type';
import { likeComment, commentComment } from '@api'
import { inject, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const store = useStore()
const router = useRouter()
const popMessage = inject(popMessageKey) as popMessage
const BaseUrl = store.getBaseUrl()
const props = defineProps<{
    comments: Comment[],
    updateLike: () => void,
    type: string,
    typeId: string,
    update: () => void
}>()

/**
 * 评论评论
 * @param commentedID 被评论的评论的id
 */
const commentComments = (commentedID: string) => {
    comments.commentedId = commentedID
    commentComment(comments.commentedId, comments.context, props.type, props.typeId)
        .then(res => {
            if (res.data.code == 1) {
                popMessage("成功评论", 'success')
                props.update()
                comments.context = ''
                comments.commentedId = ''
            }
        })
}
/**
 * 回复文本
 */
const comments = reactive({
    context: '',
    commentedId: ''
})
/**
 * 显示评论框的index
 */
const reviewIndex = ref(-1);
const review = (index: number) => {
    comments.context = ''
    if (index == reviewIndex.value) {
        reviewIndex.value = -1;
        return
    }
    reviewIndex.value = index;
}
/**
 * 点赞评论
 */
const like = (id: string) => {
    likeComment(id).then((res: any) => {
        if (res.data.code == 1) {
            popMessage('点赞成功', 'success');
            props.updateLike();
        } else {
            if (res.data.msg == "已经点赞") {
                popMessage("已经点赞", 'error')
            }
        }
    })
}
const toUserPage = (id: string) => {
    router.push({
        name: 'personCenter',
        params: {
            userId: id,
            type: 'default'
        }
    })
}
</script>
<template>
    <div class="comments">
        <template v-for="list, index of props.comments">
            <div class="comment">
                <div @click="toUserPage(list.userId)" class="avatar">
                    <img :src="BaseUrl + '/static/image/' + list.avatar" alt="">
                </div>
                <div>
                    <div class="textContent">
                        <a class="userName">{{ list.name }}:</a>
                        {{ list.content }}
                        <div class="origin-comment" v-if="list.commentedId != '-1'">
                            <a class="userName">{{ list.commented?.name }}:</a>
                            {{ list.commented?.content }}
                        </div>
                        <div class="bottom">
                            <span class="date">{{ list.createTime[1] }}月{{ list.createTime[2] }}日 {{ list.createTime[3]
                            }}:{{ list.createTime[4] }}</span>
                            <div>
                                <div style="display: flex; justify-content: center;">
                                    <div @click="like(list.id)" class="like">
                                        <img src="../../assets/likes.svg"> ({{ list.likes }})
                                    </div>
                                    <span @click="review(index)" class="review">回复</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="reviewBox" v-if="reviewIndex == index">
                        <div class="input">
                            <textarea v-model="comments.context" :placeholder="`回复:${list.name}`" type="text" />
                        </div>
                        <div style=" padding: 5px 10px 15px;display: flex;justify-content: end;">
                            <span class="commentSize">{{ 140 - comments.context.length }}</span>
                            <a class="sendComment" @click="commentComments(list.id)">
                                <span style="color: white;font-size: 14px;margin-left: 2px;">评论</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </template>

    </div>
</template>
<style lang="css" scoped>
.origin-comment {
    background-color: rgb(240, 240, 240);
    padding: 15px 10px;
    margin-top: 5px;
}

.commentSize {
    line-height: 32px;
    font-size: 12px;
    color: #999;
    margin-right: 12px;
}

.sendComment {
    background-color: var(--blue-style);
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border-radius: 5px;
    height: 30px;
    cursor: pointer;
}

.reviewBox .input textarea {
    resize: none;
    width: calc(100% - 10px);
    border: 1px solid #ededed;
}

.reviewBox {
    background-color: rgb(249, 249, 249);
    border-radius: 5px;
    margin-bottom: 15px;
}

.reviewBox .input {
    padding: 20px 10px 5px;
    width: 540px;
}

.review:hover {
    text-decoration: underline;
}

.review {
    margin-left: 10px;
    cursor: pointer;
}

.like {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-right: 10px;
    border-right: 1px solid #ededed;
}

.bottom {
    display: flex;
    margin-top: 25px;
    align-items: center;
    justify-content: space-between;
    width: 550px;
}

.date {
    font-size: 12px;
    color: #999;
}

.textContent {
    margin-bottom: 15px;
    font-size: 12px;
    display: inline-block;
    word-break: break-all;
}

.avatar {
    margin-right: 12px;
    cursor: pointer;
}

.avatar img {
    width: 50px;
    height: 50px;
}

.userName {
    font-size: 12px;
    color: var(--blue-style);
}

.comment {
    display: flex;
    margin-top: 10px;
    border-bottom: 1px dotted #999;
}

.comment:last-child {
    border-bottom: none;
}
</style>